import React, {
    PureComponent
} from 'react';

import {
    View,
    Text,
    StyleSheet,
    ScrollView
} from 'react-native';

import {
    Tip,
    Bar,
    Dialog,
    Press,
    Layout,
    Loading
} from './../../components';

import {
    Actions
} from 'react-native-router-flux';

import Basic from './basic';
import Header from './header';
import connect from './../../utils/connect';
import MoreView from './../home/components/more';

import more_icon from './../../images/more.png';
import message_icon from './../../images/home/message.png';
import like_icon from './../../images/home/liked_icon.png';
import unlike_icon from './../../images/home/unlike_icon.png';
import go_back_icon from './../../images/profile/go_back.png';

import userAction from './../../state/actions/user';
import * as userTypes from './../../state/types/user';

import commonAction from './../../state/actions/common';
import * as commonTypes from './../../state/types/common';

interface Props {
    user: any,
    params: any,
    common: any,
    userActions: any,
    commonActions: any,
    userId: string | number
}

@connect([`user`, `common`], {
    userActions: userAction,
    commonActions: commonAction
})
class Profile extends PureComponent<Props> {
    static defaultProps = {
        userId: 4198,
        params: {}
    }

    componentDidMount() {
        this.fetchData();
    }

    private pop = () => {
        Actions.pop();
    }

    private fetchData = async () => {
        try {
            await this.userActions[
                userTypes.getUserProfile
            ](this.userId);
        }
        catch (e) {
            Dialog.alert({
                title: `Tips`,
                message: e.message
            })
        }
    }

    get userActions(): any {
        const {
            userActions
        } = this.props;
        return userActions;
    }

    get commonActions() {
        const {
            commonActions
        } = this.props;
        return commonActions;
    }

    get userId() {
        const {
            userId,
            params = {}
        } = this.props;
        return ~~(params.userId || userId);
    }

    get loginUser() {
        const {
            user
        } = this.props;
        const {
            loginUser
        } = user;
        return loginUser;
    }

    get loginUserId() {
        const {
            userId
        } = this.loginUser;
        return ~~userId;
    }

    get Data() {
        const {
            user
        } = this.props;

        const {
            profiles = {}
        } = user;
        return profiles[this.userId];
    }

    get Profile() {
        return this.Data || {};
    }

    get aboutMe() {
        const {
            aboutme
        } = this.Profile;
        return aboutme;
    }

    get nickName() {
        const {
            userName
        } = this.Profile;
        return userName;
    }

    get isLiked() {
        const {
            likeStatus = 0
        } = this.Profile;
        return likeStatus === 1 || likeStatus === 3;
    }

    get likeIcon() {
        return this.isLiked ? like_icon : unlike_icon;
    }

    private renderRight = () => (
        <Press
            source={more_icon}
            onPress={this.onPressMore}
        />
    )

    private onPressMore = () => {
        const content = (
            <MoreView
                userId={this.userId}
                onBlocked={Actions.pop}
            />
        )
        Dialog.show(content,{
            clickClose:true,
            direction:`bottom`
        })
    }

    private onChatPress = () => {
        Actions.push(`/message`, {
            userId: this.userId,
            nickName: this.nickName
        })
    }

    private onLikePress = async () => {
        const _type = this.isLiked ?
            commonTypes.resetLikeUser :
            commonTypes.postLikeUser;

        Loading.show();

        try {
            await this.commonActions
                [_type](this.userId)
        }
        catch (e) {
            Tip.warm({
                message: e.message
            })
        }
        Loading.close();
    }


    get Content() {
        return (
            <View style={styles.container}>
                <ScrollView contentContainerStyle={styles.scrollView}>
                    <Header data={this.Profile} />
                    <Basic data={this.Profile}/>
                    <View style={styles.itemView}>
                        <Text
                            style={styles.aboutMe}
                            children={this.aboutMe}
                        />
                    </View>
                </ScrollView>
                {this.loginUserId !== this.userId && (
                    <View style={styles.footerStyle}>
                        <Press
                            source={this.likeIcon}
                            style={styles.footerItem}
                            onPress={this.onLikePress}
                        />
                        <Press
                            source={message_icon}
                            style={styles.footerItem}
                            onPress={this.onChatPress}
                        />
                    </View>
                )}
            </View>
        )
    }

    render() {
        return (
            <Layout
                bar={false}
                header={false}
                scroll={false}
                padding={false}
                title={this.nickName}
                renderRight={this.renderRight}
            >
                <View style={styles.topStyle}>
                    <Press
                        onPress={this.pop}
                        source={go_back_icon}
                    />
                </View>
                {!!this.Data ? this.Content : (
                    <Loading.container/>
                )}
            </Layout>
        )
    }
}

export default Profile;

const styles = StyleSheet.create({
    container:{
        flex:1,
    },
    itemView: {
        paddingVertical:16,
        paddingHorizontal:20
    },
    aboutMe: {
        fontSize: 14,
        lineHeight: 21,
        color: `#8A92AE`
    },
    footerStyle: {
        left:0,
        right:0,
        bottom:0,
        position:`absolute`,
        paddingBottom:16,
        alignItems:`center`,
        flexDirection: `row`
    },
    footerItem: {
        flex: 1,
        alignItems: `center`,
        justifyContent: `center`
    },
    topStyle:{
        left:0,
        right:0,
        top:24,
        zIndex:10,
        paddingTop:8,
        position:`absolute`,
        paddingHorizontal:16
    },
    scrollView:{
        paddingBottom:136
    }
}) as any;